<template>
  <div v-if="!loading" class="pic-box-list">
    <dpro-slide-in-view-list
      class="pic-list"
      :list="list"
      listName="list"
      tagEle="div"
      v-if="list && list.length > 0"
    >
      <div
        class="pic g-flex-column-start"
        v-for="(item, index) in list"
        :key="item.id"
        @click="$emit('img-click', item)"
      >
        <div :class="['pic__tag', getType(item.personType)]">
          {{item.personType}}
        </div>
        <div class="pic__image-more">
          <div class="shadow" v-if="item.fromMsg && item.onload"></div>
          <dpro-img-dom
            v-if="item.catchPatImageUrl"
            class="pic__image-small pr"
            :src="`https://dianxin.minio.xiangshilian.com:9001/${item.catchPatImageUrl}`"
            :onload.sync="item.onload"
            :fromMsg="item.fromMsg"
            @error="catchPatImageUrlOnError(item)"
          />
          <div v-else class="nodata pic__image-small pr">加载中...</div>
        </div>
<!--        <template v-if="index === 0">-->
<!--          <div class="pic__desc-item">-->
<!--            <div class="pic__big-title text-ellipsis">-->
<!--              {{item.deviceName}}-->
<!--            </div>-->
<!--            <div class="pic__desc text-ellipsis" >-->
<!--              <div class="pic__big-title">{{item.alarmTime}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="pic__title text-ellipsis">{{item.deviceCode}}</div>-->
<!--        </template>-->
        <template >
          <div class="pic__big-title text-ellipsis">{{item.deviceName}}</div>
          <div class="pic__title text-ellipsis">{{item.alarmTime}}</div>
        </template>
      </div>
    </dpro-slide-in-view-list>
    <dpro-empty class="empty-box" v-if="!list.length" description="暂无数据" />
  </div>
  <div class="echart__loading" v-else>
    <dpro-loading />
  </div>
</template>

<script>
import { DproLoading, DproEmpty } from "../components/index";
import DproImgDom from "../components-business/img-dom/index.vue";
import DproSlideInViewList from "../components-business/slide-in-view-list/index.vue";
import { formatTag } from "../utils/string";

export default {
  name: "pic-list",
  props: {
    loading: {
      type: Boolean,
      default: () => true,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    getType(personType) {
      const classMap = {
        '在逃人员':'color-2',
        '盗窃(刑事)': 'color-3',
        '故意伤害(刑事)': 'color-3',
        '寻衅滋事(刑事)': 'color-3',
        '盗窃(行政)': 'color-4',
        '故意伤害(行政)': 'color-4',
        '殴打他人(行政)': 'color-4',
        '寻衅滋事(行政)': 'color-4',
      };
      return classMap[personType] || 'default-color';
    },
    formatTag,
    catchPatImageUrlOnError(item, e) {
      item.catchPatImageUrl = null;
    },
    //图片损毁时触发
    imgOnError(item, e) {
      item.imageUrl = null;
    },
  },
  components: { DproLoading, DproEmpty, DproImgDom, DproSlideInViewList },
};
</script>

<style lang="less">
@import url("./pic-list.less");
</style>
